<template>
	<view class="box">
		<!-- 加载更多 -->
		<view class="flex justify-center" v-if='messageFlag'>
			<text @click="messageS()" style="color: blue;">加载更多</text>
		</view>
		<!-- 加载切换 -->
		<view v-if="loadFlag">
			<u-loading-icon></u-loading-icon>
		</view>
		
		<u-gap></u-gap>
		<view class="p-10" v-if="interrogationPersonInfo">
			<uni-card :title="interrogationPersonInfo.xtName"  :is-shadow='true'  :isFull="true" :sub-title="interrogationPersonInfo.xtPhone" :extra="`${interrogationPersonInfo.xtAge}岁`">
				<u-text :text="interrogationInfo" lines="4"></u-text>
			</uni-card>
		</view>
		<u-gap></u-gap>



		<view class="box-1" id="list-box" @click="indexs = null">
			<view class="talk-list">
				<view class="" v-for="(item, index) in talkLists" :key="index" @click="getPre(index)">
					<view v-if="!item.isRetract">
						<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
							{{ dateChange(item.createTime) }}
						</view>
						<view class="item flex_col" :class="item.fromId == unameId ? 'push' : 'pull'">

							<u-avatar :src="item.fromId == unameId? userAvatar: friendAvatar"></u-avatar>

							<view class="content" v-if="item.type == 1" @click="onLongPress($event, item,1)">
								<!-- 文字 -->
								<text>{{ item.content }}</text>
							</view>
							<!-- 图片 -->
							<view class="contents" v-else-if="item.type == 2" @longpress="onLongPress($event, item,2)"
								@click="showPic(item.content)">
								<image :src="item.content" mode="widthFix" class="imagepic"></image>
							</view>

							<!-- 音频 -->
							<view class="message msg-voice content" @longpress="onLongPress($event, item,3)"
								v-if="item.type == 3">
								<view class="msg-text voice" @tap="playVoice(item,index)"
									:style="{ width: (item.second < 7? 7: item.second>20?20:item.second) * 8 + 'px' }">
									<image v-if="!VoiceFlag" src="../../static/img/chat/yyl.png" class="voice-img">
									</image>
									<image v-if="VoiceFlag" src="../../static/img/chat/voice-l.gif" class="voice-img"
										@click="pauseVoice"></image>
									{{ item.second }}
								</view>
							</view>

							<!-- 视频 -->
							<view class="message" v-if="item.type == 4" @longpress="onLongPress($event, item,4)">
								<video class="msg-img" :src="item.content" controls></video>
							</view>

							<view class="mask" @click.stop="requestFullScreen"></view>

							<view class="message" v-if="item.type == 5">
								<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
									{{ dateChange(item.createTime) }}
								</view>
								<text>医生发出结束问诊申请</text>
								<button @click="orders(3)">同意</button>
								<button @click="orders(2)">拒绝</button>
							</view>

							<!-- 重发 -->
							<view class="pt-20" v-if="item.readStatus == 0 && item.fromId == unameId"
								@click="reloadMessage(item)">
								<u-loading-icon></u-loading-icon>
							</view>
						</view>
					</view>
					<view v-if='item.isRetract && item.fromId == unameId' class="chat-time">
						<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
							{{ dateChange(item.createTime) }}
						</view>
						您撤回了一条信息 <text class="text-blue" @click="cxbj(item)"
							v-if="Date.now() -(new Date(item.createTime).getTime())> 120000? false :true">重新编辑</text>
					</view>

					<view v-if='item.isRetract && item.fromId != unameId' class="chat-time">
						<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
							{{ dateChange(item.createTime) }}
						</view>
						对方撤回了一条信息
					</view>

				</view>
			</view>
		</view>

		<!-- 输入框 -->
		<view v-if="srkFlag">
			<view class="box-2">
				<view class="flex_col">
					<view class="" style="margin-right: 10rpx" @click="getAn()">
						<uni-icons type="sound-filled" size="28" v-if="!flag"></uni-icons>
						<uni-icons type="chat" size="30" v-else></uni-icons>
					</view>

					<view class="flex_grow" v-if="!flag">
						<input type="text" class="content" v-model="content"
							placeholder-style="color:#DDD;" :cursor-spacing="6" />
					</view>

					<view class="flex_grow" v-else @longpress="handleTouchStart" @touchend="endRecord">
						<view class="" style="
						  text-align: center;
						  background-color: #fff;
						  line-height: 64rpx;
						">
							按住说话
						</view>
					</view>

					<view class="flex_col-left" @click="open" v-if=" content == ''">
						<uni-icons type="plusempty" size="20"></uni-icons>
					</view>
					<button class="send" v-else @touchend.prevent="sendMsgs()">发送</button>
				</view>
			</view>
		</view>

		<view v-if="!srkFlag">
			<view class="box-2">

			</view>
		</view>


		<!-- 消息气泡 -->
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{ show: showPop }">
				<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
					{{ item }}
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="jieshao">
				<view class="jieshao-yi" v-for="(val,i) in gongneng" :key="i"
					@click="val.unl == '' ? getEvent(val.mc) : $pub.go(val.unl+'?id='+userid+'&name='+uname+'&wz='+location)"
					@close='closePopup'>
					<image :src="val.img" mode=""></image>
					<view class="jieshao-yi-wz">
						{{val.mc}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import getDateTime from "@/utils/data.js";
	import {
		mapState,
		mapActions,
		mapMutations,
	} from 'vuex'
	import {
		getTimeStringAutoShort,
		fileName,
		uploadFile
	} from "@/utils/myFun.js";
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				timestampThreshold: 60000, // 60秒
				/* 聊天列表 */
				// talkList: [],
				/* 聊天参数 */
				srkFlag: true,
				message: {
					type: 1,
					fromId: "",
					messageType: "0",
					messageId: "",
					toId: "",
					content: "",
				},
				/* 用户数据 */
				user: {},
				loadFlag: false,
				messageFlag: false,
				messageSize: 10,
				chatSize: 0,
				friendAvatar: '/static/online/doctor.png',
				/* 表单数据  */
				form: {
					consultationSuggestion: "",
					description: "",
					diagnose: "",
					isLongtime: false,
					isMoveDifficult: false,
					medicationSuggestion: "",
					productList: [],
					userid: "",
					uemployeeid: "",
				},

				/* 飒飒大苏打 */
				map: [],
				right: false,
				arr: [],
				websocketData: "", //数据
				Voice: "", //语音
				flag: false,
				content: "",
				userAvatar: '',
				userid: "",
				doctorId: "",
				unameId: uni.getStorageSync("ID"),

				flags: "",
				uname: "",
				chattingList: "", //自己信息
				// chattingList2:'',//别人信息
				tabListL: [{
						name: "结束",
					},
					{
						name: "退单",
					}
				],
				isPlaying: false,
				isControls: true,
				gongneng: [{
						img: "/static/img/gongneng/ba.png",
						mc: "图片",
						unl: "",
					},
					{
						img: "/static/img/gongneng/jiu.png",
						mc: "拍照",
						unl: "",
					},
					{
						img: "/static/img/gongneng/shi.png",
						mc: "视频",
						unl: "",
					},
					{
						img: "/static/img/gongneng/shiyi.png",
						mc: "语音",
						unl: "",
					},
				],
				indexs: null,
				location: "",
				popButton: ["复制", "转发", "删除", "撤回"],
				/* 显示遮罩 */
				showShade: false,
				/* 按钮组需要参数 */
				queryData: null,
				showPop: false,
				popStyle: "",
				myName: null,
				orderData: {},
				title: "用户"
			};
		},
		computed: {
			...mapState('m_message', ['talkList']),
			...mapState('m_interrogation', ['interrogationPersonInfo',"interrogationInfo"]),
			
			talkLists() {
				let messageSize = this.talkList.filter(obj => obj.friendId == this.form.uemployeeid).map(obj => obj
					.message).length
				this.messageFlag = messageSize > 10 ? true : false;
				this.scrollToBottom();

				let size = messageSize - this.messageSize - this.chatSize < 0 ? 0 : messageSize - this.messageSize - this
					.chatSize;

				return this.talkList.filter(obj => obj.friendId == this.form.uemployeeid).map(obj => obj.message).slice(
					size, messageSize)
			},
		},

		async onLoad(options) {

			if (options.data) {
				//
				let decodeURIComponentData = options.data
				//
				let data = JSON.parse(decodeURIComponent(decodeURIComponentData));

				/*  */
				data.orderNo = options.orderNo;
				data.appStatus = options.appStatus;
				this.orderData = data;
				console.log(data, 'sdata');
				/* 设置标题 */
				this.setTitle(data.uname || data.sessageName + '(医生)')
				/* 外面传来的参数 */
				let re = await this.$API.chatApi.getId({
					"uemployeeid": data.uemployeeid
				});
				this.form.uemployeeid = re;
				this.userAvatar = uni.getStorageSync("userInfo").avatar

				this.scrollToBottom();
			}
		},
		filters: {
			formatDate(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10) hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10) minutes = "0" + minutes;
				var time = " " + hours + ":" + minutes;
				return time;
			},
		},
		onShow() {
			this.getWindowSize()
		},
		methods: {
			...mapMutations('m_message', ['saveMessageStorage', 'INSERT_MESSAGE_SESSION', "DELETE_CONVERSATIONOne",
				"DELETE_MessageOne", "RETRACT_MESSAGE"
			]),
			/* 查询患者信息 */
			async getone(){
				
				// if(this.form.){
					
				// }
				
				
				await this.$API.familyApi.getone()
			},
			
			/*  */
			setTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				});
			},
			forward() {
				if (this.messagetype != 2) {
					uni.navigateTo({
						url: `/pages/forward/forward?data=${JSON.stringify(this.queryData)}&messagetype=${this.messagetype}`
					})
				} else {
					uni.showToast({
						title: '该类型信息不支持转发',
						icon: "none"
					})
				}
			},
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "success",
						});
					},
					fail() {
						uni.showToast({
							title: "复制失败",
							icon: "none",
						});
					},
				});
			},
			deleteMessage(id) {
				this.DELETE_MessageOne(id);
				/* 将传入的会话id */
				// this.DELETE_CONVERSATIONOne(this.friend.id);
				uni.showToast({
					title: "删除成功",
					icon: "success",
				});
			},

			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							witdh: res.windowWidth,
							height: res.windowHeight,
						};
					},
				});
			},
			/* 长按监听 */
			onLongPress(e, payload, messagetype) {
				let [touches, style, index] = [
					e.touches[0],
					"",
					e.currentTarget.dataset.index,
				];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > this.winSize.height / 2) {
					style = `bottom:${this.winSize.height - touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > this.winSize.witdh / 2) {
					style += `right:${this.winSize.witdh - touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}

				/* 传递参数 */
				this.queryData = payload;
				this.messagetype = messagetype;
				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});

				let isExist = this.popButton.find(obj => obj == "撤回")
				if (this.queryData.fromId == this.unameId) {
					if (!isExist) {
						this.popButton.push("撤回");
					}
				} else {
					if (isExist) {
						const index = this.popButton.findIndex(obj => obj == "撤回");
						this.popButton.splice(index, 1);
					}
				}
			},
			reloadMessage(data) {
				console.log(data, 'data');

				let msg = {
					code: "5",
					message: data,
				};

				this.$ws.send(JSON.stringify(msg));
			},
			retractMessage(data) {
				let msg = {
					code: "6",
					message: {
						"messageId": data.messageId,
						"userId": data.toId,
						"messageType": "0"
					}
				}
				this.$ws.send(JSON.stringify(msg));
				this.RETRACT_MESSAGE(msg.message);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				console.log(e, "e");
				let index = Number(e.currentTarget.dataset.index);
				switch (index) {
					case 0:
						this.copy(this.queryData.content);
						break;
					case 1:
						this.forward();
						break;
					case 2:
						this.deleteMessage(this.queryData.messageId);
						break;
					case 3:
						let currentTime = Date.now();
						let messageTime = this.queryData.createTime;

						if (currentTime - messageTime < 120000) {
							this.retractMessage(this.queryData);
						} else {
							uni.showToast({
								title: '只能撤回两分钟之内的信息',
								icon: "none"
							})
						}
						break;

					default:
						break;
				}

				this.hidePop();
			},
			messageS() {
				this.loadFlag = true;
				this.messageFlag = false;

				setTimeout(() => {
					this.messageFlag = true;
					this.loadFlag = false;

					this.messageSize += 10
				}, 2000)

			},

			/* 时间间隔 */
			shouldDisplayTimestamp(index) {
				if (index === 0) {
					return true; // 第一条消息总是显示时间戳
				}
				const currentTimestamp = this.talkLists[index].createTime;
				const previousTimestamp = this.talkLists[index - 1].createTime;
				const timeDiff = currentTimestamp - previousTimestamp;
				return timeDiff >= this.timestampThreshold;
			},
			//时间处理
			dateChange(val) {
				return getTimeStringAutoShort(val, true);
			},
			/* 发送文本内容 */
			sendMsgs() {
				// 发送内容不为空
				if (this.content.trim() != "") {
					this.sendMsg(this.content, 1);
				} else {
					uni.showToast({
						title: '信息内容不能为空',
						icon: "none"
					})
				}
			},
			sendMsg(data, type) {
				/* 信息ID */
				this.message.messageId = this.$uuid();

				this.message.fromId = uni.getStorageSync("ID");

				this.message.toId = this.form.uemployeeid;

				this.message.createTime = new Date().getTime();
				/* 类型 */
				this.message.type = type
				/* 内容 */
				this.message.content = data

				this.message.isUemployee = true

				this.message.readStatus = 0

				/*页面保存 */
				let msg = {
					code: "2",
					message: this.message,
				};

				let newdata = {
					"friendId": this.form.uemployeeid,
					"message": {
						...msg.message
					},
				};

				this.$ws.send(JSON.stringify(msg));

				this.saveMessageStorage(newdata)

				this.content = "";
				this.scrollToBottom()
			},

			// 预览图片
			showPic(msg) {
				console.log(msg);

				let arr = [];
				arr.push(msg);
				uni.previewImage({
					// indicator: "none",
					current: 1,
					urls: arr,
				});
			},
			getFu(item) {
				console.log(item.content);
				uni.setClipboardData({
					data: item.content,
					success() {
						uni.showToast({
							title: "已复制到剪贴板",
							icon: "none",
							position: "top",
						});
					},
				});
			},
			getOption(e, val) {
				console.log(val);
				if (e == "复制") {
					uni.setClipboardData({
						data: val,
						success() {
							uni.showToast({
								title: "已复制到剪贴板",
								icon: "none",
								position: "top",
							});
						},
					});
				}
			},

			fullscreenchange(e) {
				if (e.detail.fullScreen) {
					// 全屏
					this.videoContext.play();
					this.isControls = true;
				} else {
					this.isControls = false;
				}
			},
			requestFullScreen() {
				this.videoContext.requestFullScreen();
			},
			handlePlay() {
				this.isPlaying = true;
				// 调用 play() 必须使用 uni.createVideoContext 创建 video
				this.videoContext.play();
			},

			// 暂停视频
			handlePause() {
				this.isPlaying = false;
				// 调用 pause() 必须使用 uni.createVideoContext 创建 video
				this.videoContext.pause();
			},
			getAn() {
				this.flag = !this.flag;
			},
			/* 点击导航按钮事件 */
			onNavigationBarButtonTap(e) {
				this.right = !this.right;
			},

			getEvent(e) {
				let that = this;
				console.log(e);
				if (e == "图片") {
					uni.chooseImage({
						count: 1,
						sizeType: ["original", "compressed"],
						sourceType: ["album"], //这要注意，camera掉拍照，album是打开手机相册
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;

							uni.uploadFile({
								url: this.$url + "/upload/image",
								filePath: tempFilePaths[0],
								name: "file",
								header: {
									Authorization: uni.getStorageSync("token"),
								},
								success: (uploadFileRes) => {
									console.log(JSON.parse(uploadFileRes.data).data.fileUrl,
										"JSON.parse(uploadFileRes.data).fileUrl");
									this.sendMsg(JSON.parse(uploadFileRes.data).data.fileUrl,
										2);
									this.closePopup()
								},
							});
						},
					});
				} else if (e == "拍照") {
					var self = this;
					uni.chooseImage({
						count: 1,
						sizeType: ["original", "compressed"],
						sourceType: ["camera"], //这要注意，camera掉拍照，album是打开手机相册
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							// console.log(tempFilePaths[0], 6666);
							uni.uploadFile({
								url: self.$url + "/upload/image", //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: "file",
								header: {
									Authorization: uni.getStorageSync("token"),
								},
								success: (uploadFileRes) => {
									this.sendMsg(JSON.parse(uploadFileRes.data).data
										.fileUrl, 2);
									this.closePopup()
								},
							});
						},
					});
				} else if (e == "视频") {
					var self = this;
					uni.chooseVideo({
						sourceType: ["camera"],
						success: function(res) {
							console.log(res.tempFilePath);
							const tempFilePath = res.tempFilePath;
							uni.uploadFile({
								url: self.$url + "/upload/video",
								filePath: tempFilePath,
								name: "file",
								header: {
									Authorization: uni.getStorageSync("token"),
								},
								success: (res) => {
									self.sendMsg(JSON.parse(res.data).data.fileUrl, 4);
								},
							});
						},
					});
				} else if (e == "语音") {
					this.$refs.popup.close();
					this.flag = true;
				}
			},
			getDi() {
				console.log(1);
				uni.getLocation({
					type: "gcj02",
					geocode: true, //设置该参数为true可直接获取经纬度及城市信
					success: (res) => {
						let obj = {
							longitude: res.longitude,
							latitude: res.latitude,
							accuracy: res.accuracy,
						};
						console.log(obj);
						this.map = obj;
						console.log(this.map);
						console.log(
							res.address.province +
							res.address.city +
							res.address.district +
							res.address.street +
							res.address.poiName +
							res.address.streetNum
						);
					},
				});
			},
			//录音
			handleTouchStart(e) {
				console.log("开始录音", e);
				uni.showLoading({
					title: "录音中...",
				});
				this.length = 1;
				recorderManager.start();
				this.timer = setInterval(() => {
					this.length += 1;
					if (this.length >= 60) {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			endRecord() {
				console.log("停止");
				uni.hideLoading();
				recorderManager.stop();
				recorderManager.onStop((res) => {
					this.Voice = res.tempFilePath;
					this.uploadRecord(this.Voice);
				});
			},
			uploadRecord(tempFilePath) {
				console.log(tempFilePath, 4);
				let tempFilePaths = tempFilePath;
				console.log(tempFilePath);
				const uploadTask = uni.uploadFile({
					url: this.$url + "/upload/video",
					filePath: tempFilePaths, //录音结束后返回的临时路径
					fileType: "video",
					name: "file",
					header: {
						"content-type": "multipart/form-data",
						Authorization: uni.getStorageSync("token"),
					},
					success: (res) => {
						console.log("-----上传成功-----", JSON.stringify(res.data));
						this.sendMsg(JSON.stringify(res.data), 2);
					},
					fail: (res) => {
						console.log("-----上传失败-----" + JSON.stringify(res));
					},
				});
			},
			playVoice(item) {
				if (this.Voice) {
					innerAudioContext.src = this.Voice;
					innerAudioContext.play();
				}
			},
			scrollToBottom() {
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 999999999,
						duration: 300,
					});
				});
			},
			getPre(index) {
				this.indexs = index;
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open("bottom");
			},
			closePopup(e) {
				this.$refs.popup.close()
			},

			getNr(i, val) {
				console.log(i, val);
				if (i == 1) {
					uni.navigateTo({
						url: "/pages_manage/bingmr/content/content?id=" + val,
					});
				} else if (i == 2) {
					uni.navigateTo({
						url: "/pages_manage/handle/content/content?id=" + val,
					});
				}
			},
			async orders(status) {
				console.log(this.orderData, 'sfsdfsd');
				let data = {
					"consultationOrderId": this.orderData.consultationOrderId,
					"status": status
				}
				let re = await this.$API.orderApi.clinicalReception(data);
				if (re && status != 2) {
					this.srkFlag = false;
					uni.showToast({
						title: '感谢使用，已经结束此次问诊',
						icon: "none"
					})
				}
			},
			onNavigationBarButtonTap() {
				if (this.orderData.applyStatus == "1") {
					uni.showModal({
						title: "结束问诊聊天",
						content: "是否结束问诊,结束后将不能继续对话！",
						success: (res) => {
							if (res.confirm) {
								this.orders();
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						},
					});
				} else if (this.orderData.applyStatus == "0") {
					uni.showModal({
						title: "是否进行退款操作",
						content: "是否取消问诊，将会进行退款！",
						success: (res) => {
							if (res.confirm) {} else if (res.cancel) {
								console.log("用户点击取消");
							}
						},
					});
				} else if (this.orderData.applyStatus == "2") {

				}
			},
		},
	};
</script>


<style lang="scss" scoped>
	/* 遮罩 */
	@import "@/static/styles/shade.scss";

	/*  */s
	page {
		background-color: #f3f3f3;
		font-size: 28rpx;
	}

	/*  */
	.msg-img {
		max-width: 400rpx;
		border-radius: $uni-border-radius-base;
	}




	/* 加载数据提示 */
	.tips {
		position: fixed;
		left: 0;
		top: var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform: translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;

		&.show {
			transform: translateY(0);
		}
	}

	/*  */
	.box-1 {
		width: 100%;
		height: auto !important;

		padding-bottom: 185rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	/*  */
	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 10;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #f3f3f3;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 30rpx;
			height: 100rpx;
		}

		.content {
			background-color: #fff;
			height: 64rpx;

			padding: 20rpx;
			border-radius: 32rpx;
			font-size: 26rpx;
		}

		.send {
			background-color: #08b69f;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 5px;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;

			&:active {
				background-color: #5fc496;
			}
		}
	}

	/*  */
	.chat-time {
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
		line-height: 34rpx;
		padding: 20rpx 0;
		text-align: center;
	}

	/*  */
	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				margin-top: 30rpx;
				padding: 10rpx 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			.contents {
				// height: 300rpx;
				margin-top: 30rpx;
				padding: 10rpx 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
			}

			.imagepic {
				width: 200rpx;
				// height: 400rpx;
			}



			.contentss {
				position: relative;
				margin-top: 30rpx;
				padding: 10rpx 20rpx;
				max-width: 500rpx;
				max-height: 500rpx;

				.video-size {
					width: 400rpx;
					// height: 100rpx;
				}
			}

			.contentfile {
				margin-top: 30rpx;
				padding: 20rpx;
				max-width: 500rpx;
				max-height: 500rpx;
				background-color: #fff;
				margin-right: 32rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				position: relative;
				// text{
				// 	margin-left: 20rpx;
				// }
			}

			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 20rpx;
					background-color: #fff;

					&::after {
						content: "";
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 20rpx;
						left: -18rpx;
					}

					.content-nr {
						position: absolute;
						left: 0;
						top: 120rpx;
						z-index: 100;
						width: 500rpx;
						height: 300rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						background-color: #3d4043;

						.content-nr-yi {
							padding: 20rpx;
							color: #fff;
							// position: absolute;
						}

						.tan-qian {
							position: absolute;
							left: 65rpx;
							top: -35rpx;
							border: 20rpx solid;
							border-color: transparent transparent #3d4043 transparent;
						}
					}
				}

				.contentfile {
					.content-nr {
						position: absolute;
						left: 0;
						top: 120rpx;
						z-index: 100;
						width: 500rpx;
						height: 300rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						background-color: #3d4043;

						.content-nr-yi {
							padding: 20rpx;
							color: #fff;
						}

						.tan-qian {
							position: absolute;
							left: 65rpx;
							top: -35rpx;
							border: 20rpx solid;
							border-color: transparent transparent #3d4043 transparent;
						}
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content {
					margin-right: 20rpx;
					background-color: #a0e959;

					&::after {
						content: "";
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 20rpx;
						right: -18rpx;
					}

					.content-nr {
						position: absolute;
						left: -330rpx;
						top: 130rpx;
						z-index: 100;
						display: flex;
						flex-wrap: wrap;
						width: 500rpx;
						height: 300rpx;
						justify-content: center;
						background-color: #3d4043;

						.content-nr-yi {
							padding: 20rpx;
							color: #fff;
							// position: absolute;
						}

						.tan-qian {
							position: absolute;
							left: 402rpx;
							top: -35rpx;
							border: 20rpx solid;
							border-color: transparent transparent #3d4043 transparent;
						}
					}
				}

				.contentfile {
					.content-nr {
						position: absolute;
						left: -330rpx;
						top: 130rpx;
						z-index: 100;
						display: flex;
						flex-wrap: wrap;
						width: 500rpx;
						height: 300rpx;
						justify-content: center;
						background-color: #3d4043;

						.content-nr-yi {
							padding: 20rpx;
							color: #fff;
							// position: absolute;
						}

						.tan-qian {
							position: absolute;
							left: 402rpx;
							top: -35rpx;
							border: 20rpx solid;
							border-color: transparent transparent #3d4043 transparent;
						}
					}
				}
			}
		}
	}

	/*  */
	.box-san {
		position: absolute;
		left: 0;
		// top: -30rpx;
		z-index: 99;
		background-color: #08b69f;
	}

	/*  */
	.jieshao {
		// height: 640rpx;
		height: 340rpx;
		// background-color: #fff;
		background-color: #f3f3f3;
		display: flex;
		// align-items: center;
		// justify-content: space-between;
		justify-content: flex-start;
		padding: 0 20rpx;
		flex-wrap: wrap;

		// align-items: center;
		.jieshao-yi {
			padding: 40rpx;

			// height: 100rpx;
			image {
				width: 90rpx;
				height: 90rpx;
			}

			.jieshao-yi-wz {
				margin-top: 10rpx;
				text-align: center;
			}
		}
	}

	/*  */
	.box-right {
		position: fixed;
		top: 20rpx;
		z-index: 999;
		right: 20rpx;
		width: 200rpx;
		min-height: 244rpx;
		background-color: #3d4043;

		// border-radius: 10rpx;
		// padding-bottom: 40rpx;
		// .tan {
		// position: absolute;
		// z-index: 999;
		// left: 100rpx;
		// left: -106rpx;
		// bottom: -340rpx;
		// background-color: #3D4043;
		.tan-qian {
			position: absolute;
			left: 144rpx;
			top: -37rpx;
			border: 20rpx solid;
			border-color: transparent transparent #3d4043 transparent;
			width: 0;
			// height: 0;
		}

		.tan-nr {
			line-height: 80rpx;
			border-bottom: 1rpx solid #fff;
			text-align: center;
			letter-spacing: 5rpx;
			color: #fff;
		}

		// }
	}
</style>